<template>
    <div class="app-container">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-row :gutter="20" >
                <el-col :span="12">
                    <el-form-item label="员工姓名" prop="name">
                        <el-input v-model="form.name" placeholder="请输入员工姓名"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="归属部门" prop="deptId">
                        <treeselect v-model="form.deptId" :options="deptOptions" placeholder="请选择归属部门"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
                        <el-input v-model="form.userName" placeholder="请输入用户名称"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
                        <el-input v-model="form.password" placeholder="请输入用户密码" type="password"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="岗位" prop="postIds">
                        <el-select v-model="form.postIds" multiple placeholder="请选择岗位">
                            <el-option
                                    v-for="item in postOptions"
                                    :key="item.postId"
                                    :label="item.postName"
                                    :value="item.postId"
                                    :disabled="item.status == 1"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="角色" prop="roleIds">
                        <el-select v-model="form.roleIds" multiple placeholder="请选择角色">
                            <el-option
                                    v-for="item in roleOptions"
                                    :key="item.roleId"
                                    :label="item.roleName"
                                    :value="item.roleId"
                                    :disabled="item.status == 1"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="性别" prop="sex">
                        <el-radio-group v-model="form.sex">
                            <el-radio
                                    v-for="dict in sexOptions"
                                    :key="dict.dictValue"
                                    :label="dict.dictValue"
                            >{{dict.dictLabel}}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="出生日期" prop="birthday">
                        <el-date-picker
                                v-model="form.birthday"
                                type="date"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd"
                                placeholder="请选择出生日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="身份证号" prop="idCard">
                        <el-input v-model="form.idCard" placeholder="请输入身份证号" maxlength="18"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="家庭住址" prop="address">
                        <el-input v-model="form.address" placeholder="请输入家庭住址"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系电话" prop="mobilePhone">
                        <el-input v-model="form.mobilePhone" placeholder="请输入联系电话" maxlength="11"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="工作电话" prop="workPhone">
                        <el-input v-model="form.workPhone" placeholder="请输入工作电话" maxlength="11"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="工作邮箱" prop="workEmail">
                        <el-input v-model="form.workEmail" placeholder="请输入工作邮箱" maxlength="50"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="工作地点" prop="workLocation">
                        <el-input v-model="form.workLocation" placeholder="请输入工作地点" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="是否婚配" prop="isMarital">
                        <el-radio-group v-model="form.isMarital">
                            <el-radio label="已婚">已婚</el-radio>
                            <el-radio label="未婚">未婚</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="配偶姓名" prop="spouseCompleteName">
                        <el-input v-model="form.spouseCompleteName" placeholder="请输入配偶姓名" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="配偶生日" prop="spouseBirthday">
                        <el-date-picker
                                v-model="form.spouseBirthday"
                                type="date"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd"
                                placeholder="请选择配偶出生日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="子女人数" prop="childrenNum">
                        <el-input-number v-model="form.childrenNum" controls-position="right" :min="0" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="用户状态" prop="status">
                        <el-radio-group v-model="form.status">
                            <el-radio
                                    v-for="dict in statusOptions"
                                    :key="dict.dictValue"
                                    :label="dict.dictValue"
                            >{{dict.dictLabel}}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="备注">
                        <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item size="large">
                        <el-button type="primary" @click="submitForm" :loading="loadingFlag">提交</el-button>
                        <el-button @click="resetForm('form')">重置</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
    import {getUser, addUser} from "@/api/system/user";

    /*部门树展示相关函数及组件*/
    import {treeselect} from "@/api/system/dept";
    import Treeselect from "@riophae/vue-treeselect";
    import "@riophae/vue-treeselect/dist/vue-treeselect.css";

    export default {
        name: "addUser",
        components: {Treeselect},
        data() {
            return {
                //加载标识
                loadingFlag: false,
                // 默认密码
                initPassword: undefined,
                // 部门树选项
                deptOptions: undefined,
                // 状态数据字典
                statusOptions: [],
                // 性别状态字典
                sexOptions: [],
                // 岗位选项
                postOptions: [],
                // 角色选项
                roleOptions: [],
                // 表单参数
                form: {
                    userId: undefined,
                    empId: undefined,
                    deptId: undefined,
                    name: undefined,
                    userName: undefined,
                    password: undefined,
                    status: "0",
                    refuseDes: undefined,
                    sex: "0",
                    idCard: undefined,
                    birthday: undefined,
                    address: undefined,
                    isMarital: "已婚",
                    spouseCompleteName: undefined,
                    spouseBirthday: undefined,
                    childrenNum: 0,
                    mobilePhone: undefined,
                    email: undefined,
                    workPhone: undefined,
                    workEmail: undefined,
                    workLocation: undefined,
                    contractWarning: undefined,
                    isActive: "是",
                    remark: undefined,
                    postIds: [],
                    roleIds: []
                },
                // 表单校验
                rules: {
                    name: [
                        {required: true, message: "员工名称不能为空", trigger: "blur"}
                    ],
                    deptId: [
                        {required: true, message: "归属部门不能为空", trigger:  ["blur","change"]}
                    ],
                    userName: [
                        {required: true, message: "用户名称不能为空", trigger: "blur"}
                    ],
                    password: [
                        {required: true, message: "用户密码不能为空", trigger: "blur"}
                    ],
                    postIds: [
                        {required: true, message: "岗位信息不能为空", trigger: ["blur","change"]}
                    ],
                    roleIds: [
                        {required: true, message: "角色信息不能为空", trigger: ["blur","change"]}
                    ],
                    idCard: [
                        {
                            pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
                            message: "'请输入正确的身份证号码",
                            trigger: ["blur"]
                        }
                    ],
                    mobilePhone: [
                        {
                            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                            message: "请输入正确的手机号码",
                            trigger: "blur"
                        }
                    ],
                    email: [
                        {
                            type: "email",
                            message: "'请输入正确的邮箱地址",
                            trigger: ["blur"]
                        }
                    ],
                    workPhone: [
                        {required: true, message: "工作电话不能为空", trigger: "blur"},
                        {
                            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                            message: "请输入正确的手机号码",
                            trigger: "blur"
                        }
                    ],
                    workEmail: [
                        {
                            type: "email",
                            message: "'请输入正确的邮箱地址",
                            trigger: ["blur"]
                        }
                    ],
                }
            };
        },
        created() {
            this.getDicts("sys_normal_disable").then(response => {
                this.statusOptions = response.data;
            });
            this.getDicts("sys_user_sex").then(response => {
                this.sexOptions = response.data;
            });
            this.getConfigKey("sys.user.initPassword").then(response => {
                this.initPassword = response.msg;
            });
            this.getTreeselect();
            getUser().then(response => {
                this.postOptions = response.posts;
                this.roleOptions = response.roles;
                this.form.password = this.initPassword;
            });
        },
        methods: {
            /** 查询部门下拉树结构 */
            getTreeselect() {
                treeselect().then(response => {
                    this.deptOptions = response.data;
                });
            },
            submitForm() {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        this.loadingFlag = true;
                        addUser(this.form).then(response => {
                            if (response.code === 200) {
                                this.msgSuccess("新增成功");
                            } else {
                                this.msgError(response.msg);
                            }

                        });
                        this.loadingFlag = false;
                    }
                })
            },
        }
    }
</script>

<style scoped>

</style>
